import { useDebounceFn, useWindowSize } from '@vueuse/core';
import { onMounted, ref } from 'vue';

/**
 * 带有底部导航栏的页面的高度，可配合 var-list 组件做上滑触底加载更多
 * @returns
 */
export const useBottomBarPageHeight = () => {
  const pageHeight = ref('90vh');
  const { height: windowHeight } = useWindowSize();

  // 为了实现列表上拉加载更多，计算一下页面的高度
  onMounted(() => {
    computedHeight();
  });

  // 计算高度，通过防抖避免频繁触发
  const computedHeight = useDebounceFn(() => {
    const footer = document.querySelector('footer');
    const _pageHeight = windowHeight.value - (footer?.offsetHeight ?? 0);
    pageHeight.value = `${_pageHeight}px`;
  }, 100);

  
  return pageHeight;
};
